<template>
  <div class="app-container">
    <!--<h1 v-color>App 根组件</h1>-->
    <h1 v-color="color">App 根组件</h1>
    <!--<h1 v-color="'color'">App 根组件</h1>-->
    <button @click="color='green'">改变color的颜色</button>
    <hr/>
    <Article>
      <template #title>
        <h3>一首诗</h3>
      </template>
      <!--接收作用域插槽-->
      <template #content="scope">
        {{scope.msg}}
        <div>
          <p>{{scope.user}}</p>
          <p>投我以木瓜，报之以琼琚。匪报也，永以为好也！</p>
          <p>投我以木桃，报之以琼瑶。匪报也，永以为好也！</p>
          <p>投我以木李，报之以琼玖。匪报也，永以为好也！</p>
        </div>
      </template>
      <template #author>
        <div>作者：李某</div>
      </template>
    </Article>
    <hr/>
    <div class="box" style="display: none">
      <!--渲染Left和Right组件-->
      <Left>
        <!--默认情况下，在使用组件的时候，提供的内容都会被填充到名称为default的插槽中-->
        <!--<template v-slot:default>-->
        <template #default>
          <p>这是在Left组件的内容区域，声明的是p标签</p>
        </template>
      </Left>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Article from "@/components/Article.vue"


export default {
  data() {
    return {
      color: 'blue'
    }
  },
  //私有子组件
  components: {
    //如果在“声明组件”的时候，没有为组件指定name名称，则组件的名称默认时“注册时的名称”
    Left,
    Article
  },
  //私有自定义指令的节点
  directives: {
    //定义名称为color的指令，指向一个配置对象
    /*color: {
      //当指令第一次被绑定到元素上的时候，会立即触发bind函数
      //形参中的el表示当前指令所绑定到的那个DOM对象
      // bind(el) {
      //   el.style.color = 'red'
      // }
      bind(el,binding) {
        el.style.color = binding.value
      },
      //每一次DOM更新时被调用
      update(el,binding) {
        el.style.color = binding.value
      }
    }*/
    color(el,binding) {
      el.style.color = binding.value
    }
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
